<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount, h, nextTick } from "vue";
import { DynamicTable } from "@/components/DynamicTable";
import { TableColumn, PaginationConfig } from "@/components/DynamicTable/types";
import DynamicForm from "@/components/DynamicForm/index.vue";
import type { DynamicFormInstance } from "@/components/DynamicForm/types";
import { FormItemConfig } from "@/components/DynamicForm/types";
import {
  ElMessage,
  ElMessageBox,
  ElTag,
  ElButton,
  ElDialog,
  ElCard,
  ElRow,
  ElCol,
} from "element-plus";
import * as echarts from "echarts";
import {
  Refresh,
  Plus,
  View,
  Edit,
  Delete,
  VideoPlay,
} from "@element-plus/icons-vue";
import {
  getScenarioList,
  getScenarioDetail,
  addScenario,
  updateScenario,
  deleteScenario,
  quickTestScenario,
  getScenarioMetadataStats,
} from "../servers";
import {
  threatTypeMap,
  attackCategoryMap,
  severityMap,
  threatTypeIcons,
} from "../helps";
import {
  createPieChartOption,
  createRingChartOption,
  createBarChartOption,
  renderChart,
  handleChartResize,
  getThreatTypeColor,
  getCategoryColor,
  getSeverityColor,
} from "../charts";

const props = defineProps<{
  task: string;
}>();

const loading = ref(false);
const scenarioList = ref<any[]>([]);
const searchFormRef = ref<DynamicFormInstance>();

// 图表数据
const chartData = ref({
  threatTypes: [] as any[],
  attackCategories: [] as any[],
  severityDistribution: [] as any[],
  totalScenarios: 0,
  totalThreatTypes: 0,
  totalCategories: 0,
});

// 图表实例
const threatTypeChart = ref<echarts.ECharts>();
const attackCategoryChart = ref<echarts.ECharts>();
const severityChart = ref<echarts.ECharts>();

const pagination = reactive<PaginationConfig>({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  pageSizes: [10, 20, 50, 100],
  layout: "total, sizes, prev, pager, next",
  background: true,
});

const searchForm = reactive({
  threat_type: "",
  attack_category: "",
  is_active: undefined,
  is_builtin: undefined,
  keyword: "",
});

const searchConfig: FormItemConfig[] = [
  {
    key: "threat_type",
    name: "威胁类型",
    type: "select",
    labelWidth: "80px",
    placeholder: "选择威胁类型",
    params: {
      clearable: true,
      showPlaceholder: false,
      options: [
        { label: "全部", value: "" },
        { label: "SQL注入", value: "sql_injection" },
        { label: "XSS", value: "xss" },
        { label: "命令注入", value: "command_injection" },
        { label: "代码执行", value: "code_execution" },
        { label: "反序列化", value: "deserialization" },
        { label: "文件上传", value: "file_upload" },
        { label: "文件包含", value: "file_inclusion" },
        { label: "SSRF", value: "ssrf" },
        { label: "XXE", value: "xxe" },
        { label: "模板注入", value: "template_injection" },
        { label: "认证绕过", value: "authentication_bypass" },
        { label: "信息泄露", value: "information_disclosure" },
      ],
    },
  },
  {
    key: "attack_category",
    name: "攻击分类",
    type: "select",
    labelWidth: "80px",

    placeholder: "选择攻击分类",
    params: {
      clearable: true,
      showPlaceholder: false,
      options: [
        { label: "全部", value: "" },
        { label: "远程代码执行", value: "rce" },
        { label: "Web攻击", value: "web_attack" },
        { label: "认证授权", value: "authentication" },
        { label: "文件操作", value: "file_operation" },
        { label: "数据库", value: "database" },
        { label: "API安全", value: "api_security" },
        { label: "云原生", value: "cloud_native" },
      ],
    },
  },
  {
    key: "is_active",
    name: "状态",
    type: "select",
    labelWidth: "80px",
    placeholder: "选择状态",
    params: {
      clearable: true,
      showPlaceholder: false,
      options: [
        { label: "全部", value: undefined },
        { label: "启用", value: true },
        { label: "禁用", value: false },
      ],
    },
  },
  {
    key: "keyword",
    name: "搜索",
    type: "input",
    labelWidth: "80px",
    col: { span: 6 },
    placeholder: "请输入场景名称或代码",
  },
];

const columns = ref<TableColumn[]>([
  {
    label: "ID",
    prop: "id",
    width: 80,
    show: true,
  },
  // {
  //   label: "场景代码",
  //   prop: "scenario_code",
  //   show: true,
  // },
  {
    label: "场景名称",
    prop: "scenario_name",
    show: true,
  },
  {
    label: "威胁类型",
    prop: "threat_type",
    width: 120,
    show: true,
    render: (row) => {
      const icon = threatTypeIcons[row.threat_type] || "🔍";
      const name = threatTypeMap[row.threat_type] || row.threat_type;
      return h("span", {}, `${icon} ${name}`);
    },
  },
  {
    label: "攻击分类",
    prop: "attack_category",
    show: true,
    render: (row) => {
      const name =
        attackCategoryMap[row.attack_category] || row.attack_category;
      return h("span", {}, name);
    },
  },
  {
    label: "严重程度",
    prop: "severity",
    width: 100,
    show: true,
    render: (row) => {
      const severityConfig: Record<string, any> = {
        critical: { text: "严重", type: "danger" },
        high: { text: "高危", type: "danger" },
        medium: { text: "中危", type: "warning" },
        low: { text: "低危", type: "info" },
      };
      const info = severityConfig[row.severity] || {
        text: severityMap[row.severity] || row.severity,
        type: "info",
      };
      return h(ElTag, { type: info.type, size: "small" }, info.text);
    },
  },
  {
    label: "状态",
    prop: "is_active",
    width: 80,
    show: true,
    render: (row) => {
      return h(
        ElTag,
        { type: row.is_active ? "success" : "info", size: "small" },
        row.is_active ? "启用" : "禁用"
      );
    },
  },
  {
    label: "场景类型",
    prop: "is_builtin",
    width: 100,
    show: true,
    render: (row) => {
      return h(
        ElTag,
        { type: row.is_builtin ? "success" : "info", size: "small" },
        row.is_builtin ? "内置" : "自定义"
      );
    },
  },
  {
    label: "操作",
    prop: "action",
    width: 280,
    fixed: "right",
    show: true,
    slot: "action",
  },
]);

// 新增/编辑场景
const showAddDialog = ref(false);
const showEditDialog = ref(false);
const showDetailDialog = ref(false);
const formRef = ref<DynamicFormInstance>();
const formData = reactive<any>({
  scenario_id: undefined,
  scenario_code: "",
  scenario_name: "",
  threat_type: "",
  attack_category: "",
  severity: "medium",
  description: "",
  payload_template: "",
  is_active: true,
});
const editingScenario = ref<any>(null);
const scenarioDetail = ref<any>(null);

const addFormConfig: FormItemConfig[] = [
  {
    key: "scenario_code",
    name: "场景代码",
    type: "input",
    required: true,
    labelWidth: "120px",
    col: { span: 12 },
    placeholder: "请输入场景代码（唯一）",
  },
  {
    key: "scenario_name",
    name: "场景名称",
    type: "input",
    required: true,
    labelWidth: "120px",
    col: { span: 12 },
    placeholder: "请输入场景名称",
  },
  {
    key: "threat_type",
    name: "威胁类型",
    type: "select",
    required: true,
    labelWidth: "120px",
    col: { span: 12 },
    options: [
      { label: "SQL注入", value: "sql_injection" },
      { label: "命令注入", value: "command_injection" },
      { label: "代码执行", value: "code_execution" },
      { label: "反序列化", value: "deserialization" },
      { label: "文件上传", value: "file_upload" },
      { label: "文件包含", value: "file_inclusion" },
      { label: "SSRF", value: "ssrf" },
      { label: "XXE", value: "xxe" },
      { label: "模板注入", value: "template_injection" },
      { label: "XSS", value: "xss" },
      { label: "认证绕过", value: "authentication_bypass" },
      { label: "信息泄露", value: "information_disclosure" },
    ],
  },
  {
    key: "attack_category",
    name: "攻击分类",
    type: "select",
    required: true,
    labelWidth: "120px",
    col: { span: 12 },
    options: [
      { label: "远程代码执行", value: "rce" },
      { label: "Web攻击", value: "web_attack" },
      { label: "认证授权", value: "authentication" },
      { label: "文件操作", value: "file_operation" },
      { label: "数据库", value: "database" },
      { label: "API安全", value: "api_security" },
      { label: "云原生", value: "cloud_native" },
    ],
  },
  {
    key: "severity",
    name: "严重程度",
    type: "select",
    labelWidth: "120px",
    col: { span: 12 },
    options: [
      { label: "严重", value: "critical" },
      { label: "高危", value: "high" },
      { label: "中危", value: "medium" },
      { label: "低危", value: "low" },
    ],
  },
  {
    key: "description",
    name: "场景描述",
    type: "textarea",
    labelWidth: "120px",
    col: { span: 24 },
    placeholder: "请输入场景描述",
  },
  {
    key: "payload_template",
    name: "负载模版",
    type: "textarea",
    required: true,
    labelWidth: "120px",
    col: { span: 24 },
    placeholder: "请输入负载模版",
    params: {
      rows: 4,
    },
  },
  {
    key: "is_active",
    name: "状态",
    type: "select",
    labelWidth: "120px",
    col: { span: 12 },
    options: [
      { label: "启用", value: true },
      { label: "禁用", value: false },
    ],
  },
];

// 快速测试
const showQuickTestDialog = ref(false);
const testForm = reactive({
  target_url: "",
});
const testResult = ref<any>(null);
const testing = ref(false);

const fetchScenarioList = async () => {
  loading.value = true;
  try {
    const params: any = {
      page: pagination.currentPage,
      page_size: pagination.pageSize,
      ...searchForm,
    };
    // 移除空值
    Object.keys(params)?.forEach((key) => {
      if (
        params[key] === "" ||
        params[key] === null ||
        params[key] === undefined
      ) {
        delete params[key];
      }
    });
    const { data } = await getScenarioList(params);

    scenarioList.value = data?.scenarios || data || [];
    pagination.total = data?.total || 0;
  } catch (error) {
    ElMessage.error("获取场景列表失败");
  } finally {
    loading.value = false;
  }
};

// 获取场景统计数据
const fetchScenarioStats = async () => {
  try {
    const { data } = await getScenarioMetadataStats({
      include_inactive: false,
    });

    if (data) {
      // 处理威胁类型数据
      const threatTypes = Object.entries(data.threat_types || {}).map(
        ([key, value]: [string, any]) => ({
          name: value.label || threatTypeMap[key] || key,
          value: value.count || 0,
          icon: value.icon || threatTypeIcons[key] || "🔍",
          percentage: value.percentage || 0,
          key: key,
        })
      );

      // 处理攻击分类数据
      const attackCategories = Object.entries(data.attack_categories || {}).map(
        ([key, value]: [string, any]) => ({
          name: value.label || attackCategoryMap[key] || key,
          value: value.count || 0,
          color: value.color || "#409EFF",
          key: key,
        })
      );

      // 处理严重程度数据
      const severityDistribution = Object.entries(
        data.severity_distribution || {}
      ).map(([key, value]: [string, any]) => ({
        name: value.label || severityMap[key] || key,
        value: value.count || 0,
        color: value.color || "#409EFF",
        key: key,
      }));

      chartData.value = {
        threatTypes,
        attackCategories,
        severityDistribution,
        totalScenarios: data.total_scenarios || 0,
        totalThreatTypes: data.total_threat_types || 0,
        totalCategories: data.total_categories || 0,
      };

      // 重新渲染图表
      nextTick(() => {
        renderCharts();
      });
    }
  } catch (error) {
    console.error("获取统计数据失败:", error);
  }
};

// 初始化图表
const initCharts = () => {
  nextTick(() => {
    // 威胁类型饼图
    const threatTypeDom = document.getElementById("threatTypeChart");
    if (threatTypeDom && !threatTypeChart.value) {
      threatTypeChart.value = echarts.init(threatTypeDom);
    }

    // 攻击分类柱状图
    const attackCategoryDom = document.getElementById("attackCategoryChart");
    if (attackCategoryDom && !attackCategoryChart.value) {
      attackCategoryChart.value = echarts.init(attackCategoryDom);
    }

    // 严重程度环形图
    const severityDom = document.getElementById("severityChart");
    if (severityDom && !severityChart.value) {
      severityChart.value = echarts.init(severityDom);
    }

    setTimeout(() => {
      renderCharts();
    }, 1000);
  });
};

// 渲染图表
const renderCharts = () => {
  // 检查数据是否存在
  if (!chartData.value) {
    console.warn("图表数据不存在");
    return;
  }

  // 威胁类型饼图
  const threatTypeOption = createPieChartOption(
    chartData.value.threatTypes || [],
    "威胁类型",
    (item) => getThreatTypeColor(item.key)
  );
  renderChart(threatTypeChart.value, threatTypeOption);

  // 攻击分类柱状图
  const attackCategoryOption = createBarChartOption(
    chartData.value?.attackCategories || [],
    "场景数量",
    (item, index) => item.color || getCategoryColor(index)
  );
  renderChart(attackCategoryChart.value, attackCategoryOption);

  // 严重程度环形图
  const severityOption = createRingChartOption(
    chartData.value.severityDistribution || [],
    "严重程度",
    (item) => getSeverityColor(item.key)
  );
  renderChart(severityChart.value, severityOption);
};

// 窗口大小改变时重新渲染图表
const handleResize = () => {
  handleChartResize([
    threatTypeChart.value,
    attackCategoryChart.value,
    severityChart.value,
  ]);
};

const handleSearch = (value: any) => {
  Object.assign(searchForm, value);
  pagination.currentPage = 1;
  fetchScenarioList();
};

const handleSearchReset = () => {
  searchFormRef.value?.resetFields();
  Object.assign(searchForm, {
    threat_type: "",
    attack_category: "",
    is_active: undefined,
    is_builtin: undefined,
    keyword: "",
  });
  pagination.currentPage = 1;
  fetchScenarioList();
};

const handlePageChange = (page: number) => {
  pagination.currentPage = page;
  fetchScenarioList();
};

const handleSizeChange = (size: number) => {
  pagination.pageSize = size;
  pagination.currentPage = 1;
  fetchScenarioList();
};

const handleCloseAddDialog = () => {
  // 关闭对话框
  showAddDialog.value = false;
  // 重置表单
  formRef.value?.resetFields();
  // 清空表单数据
  Object.assign(formData, {
    scenario_id: undefined,
    scenario_code: "",
    scenario_name: "",
    threat_type: "",
    attack_category: "",
    severity: "medium",
    description: "",
    payload_template: "",
    is_active: true,
  });
};

const handleCloseEditDialog = () => {
  // 关闭对话框
  showEditDialog.value = false;
  // 重置表单
  formRef.value?.resetFields();
};

const handleAdd = () => {
  // 先清空表单数据
  Object.assign(formData, {
    scenario_id: undefined,
    scenario_code: "",
    scenario_name: "",
    threat_type: "",
    attack_category: "",
    severity: "medium",
    description: "",
    payload_template: "",
    is_active: true,
  });
  // 打开对话框
  showAddDialog.value = true;
  // 在下一个tick重置表单验证状态
  nextTick(() => {
    formRef.value?.resetFields();
  });
};

const handleEdit = async (row: any) => {
  try {
    const { data } = await getScenarioDetail({ scenario_id: row.id });
    editingScenario.value = data;
    Object.assign(formData, {
      scenario_id: data.id,
      scenario_code: data.scenario_code,
      scenario_name: data.scenario_name,
      threat_type: data.threat_type,
      attack_category: data.attack_category,
      severity: data.severity,
      description: data.description,
      payload_template: data.payload_template || "",
      is_active: data.is_active,
    });
    showEditDialog.value = true;
  } catch (error) {
    ElMessage.error("获取场景详情失败");
  }
};

const handleViewDetail = async (row: any) => {
  try {
    const { data } = await getScenarioDetail({ scenario_id: row.id });
    scenarioDetail.value = data;
    showDetailDialog.value = true;
  } catch (error) {
    ElMessage.error("获取场景详情失败");
  }
};

const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    `确定要删除场景 "${row.scenario_name}" 吗？`,
    "删除确认",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(async () => {
    try {
      await deleteScenario({ scenario_id: row.id });
      ElMessage.success("删除成功");
      fetchScenarioList();
    } catch (error) {
      ElMessage.error("删除失败");
    }
  });
};

const handleQuickTest = (row: any) => {
  editingScenario.value = row;
  testForm.target_url = "";
  testResult.value = null;
  showQuickTestDialog.value = true;
};

const handleSubmitForm = async (submitData: any) => {
  try {
    if (showAddDialog.value) {
      await addScenario(submitData);
      ElMessage.success("添加成功");
      showAddDialog.value = false;
    } else if (showEditDialog.value) {
      // 编辑时需要确保包含 scenario_id
      const editData = {
        ...submitData,
        scenario_id: formData.scenario_id,
      };
      await updateScenario(editData);
      ElMessage.success("更新成功");
      showEditDialog.value = false;
    }
    fetchScenarioList();
  } catch (error) {
    ElMessage.error(showAddDialog.value ? "添加失败" : "更新失败");
  }
};

const handleSubmitTest = async () => {
  if (!testForm.target_url) {
    ElMessage.warning("请输入目标URL");
    return;
  }

  testing.value = true;
  try {
    const result = await quickTestScenario({
      scenario_id: editingScenario.value?.id,
      target_url: testForm.target_url,
    });
    testResult.value = result.data;
    ElMessage.success("测试完成");
  } catch (error) {
    ElMessage.error("测试失败");
  } finally {
    testing.value = false;
  }
};

onMounted(async () => {
  // 先获取数据
  await fetchScenarioList();
  await fetchScenarioStats();

  // 然后初始化图表
  initCharts();

  // 监听窗口大小变化
  window.addEventListener("resize", handleResize);
});

onBeforeUnmount(() => {
  // 清理图表实例
  threatTypeChart.value?.dispose();
  attackCategoryChart.value?.dispose();
  severityChart.value?.dispose();

  // 移除事件监听
  window.removeEventListener("resize", handleResize);
});
</script>

<template>
  <div>
    <!-- 统计图表区域 - 放在最上面 -->
    <el-card>
      <template #header>
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div style="font-size: 16px; font-weight: bold; margin-bottom: 10px">
            📊 场景统计概览
          </div>
          <div style="display: flex; gap: 20px; font-size: 14px; color: #666">
            <span
              >总场景数:
              <strong style="color: #409eff">{{
                chartData.totalScenarios
              }}</strong></span
            >
            <span
              >威胁类型:
              <strong style="color: #67c23a">{{
                chartData.totalThreatTypes
              }}</strong></span
            >
            <span
              >攻击分类:
              <strong style="color: #e6a23c">{{
                chartData.totalCategories
              }}</strong></span
            >
          </div>
        </div>
      </template>

      <el-row :gutter="20">
        <!-- 威胁类型分布饼图 -->
        <el-col :span="8">
          <div id="threatTypeChart" style="height: 350px; width: 420px"></div>
        </el-col>

        <!-- 攻击分类分布柱状图 -->
        <el-col :span="8">
          <div
            id="attackCategoryChart"
            style="height: 350px; width: 420px"
          ></div>
        </el-col>

        <!-- 严重程度分布环形图 -->
        <el-col :span="8">
          <div id="severityChart" style="height: 350px; width: 420px"></div>
        </el-col>
      </el-row>
    </el-card>

    <div style="height: 20px"></div>

    <!-- 查询和列表区域 - 作为一个整体 -->
    <el-card>
      <!-- 搜索表单 -->
      <div class="search-form-container" style="margin-bottom: 20px">
        <DynamicForm
          ref="searchFormRef"
          v-model="searchForm"
          :form-config="searchConfig"
          :gutter="16"
          label-width="100px"
          type="search"
          @search="handleSearch"
          @reset="handleSearchReset"
        />
      </div>

      <!-- 场景列表表格 -->
      <DynamicTable
        :columns="columns"
        :data="scenarioList"
        :loading="loading"
        :pagination="pagination"
        @current-page-change="handlePageChange"
        @size-change="handleSizeChange"
      >
        <template #toolbar-left>
          <el-button type="primary" :icon="Plus" @click="handleAdd">
            新增场景
          </el-button>
        </template>

        <template #action="{ row }">
          <el-button type="primary" size="small" @click="handleViewDetail(row)">
            详情
          </el-button>
          <el-button
            type="warning"
            size="small"
            :disabled="row.is_builtin"
            @click="handleEdit(row)"
          >
            编辑
          </el-button>
          <el-button type="success" size="small" @click="handleQuickTest(row)">
            测试
          </el-button>
          <el-button
            type="danger"
            size="small"
            :disabled="row.is_builtin"
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </DynamicTable>
    </el-card>

    <!-- 新增/编辑场景对话框 -->
    <el-dialog
      v-model="showAddDialog"
      :title="showAddDialog ? '新增场景' : '编辑场景'"
      width="800px"
      @close="handleCloseAddDialog"
    >
      <DynamicForm
        ref="formRef"
        v-model="formData"
        :form-config="addFormConfig"
        :gutter="16"
        type="submit"
        @submit="handleSubmitForm"
        @cancel="handleCloseAddDialog"
      />
    </el-dialog>

    <el-dialog
      v-model="showEditDialog"
      title="编辑场景"
      width="800px"
      @close="handleCloseEditDialog"
    >
      <DynamicForm
        ref="formRef"
        v-model="formData"
        :form-config="addFormConfig"
        :gutter="16"
        type="submit"
        @submit="handleSubmitForm"
        @cancel="handleCloseEditDialog"
      />
    </el-dialog>

    <!-- 场景详情对话框 -->
    <el-dialog v-model="showDetailDialog" title="场景详情" width="900px">
      <el-descriptions v-if="scenarioDetail" :column="2" border>
        <el-descriptions-item label="场景代码">
          {{ scenarioDetail.scenario_code }}
        </el-descriptions-item>
        <el-descriptions-item label="场景名称">
          {{ scenarioDetail.scenario_name }}
        </el-descriptions-item>
        <el-descriptions-item label="威胁类型">
          {{
            threatTypeMap[scenarioDetail.threat_type] ||
            scenarioDetail.threat_type
          }}
        </el-descriptions-item>
        <el-descriptions-item label="攻击分类">
          {{
            attackCategoryMap[scenarioDetail.attack_category] ||
            scenarioDetail.attack_category
          }}
        </el-descriptions-item>
        <el-descriptions-item label="严重程度">
          <el-tag
            :type="
              scenarioDetail.severity === 'critical' ||
              scenarioDetail.severity === 'high'
                ? 'danger'
                : scenarioDetail.severity === 'medium'
                ? 'warning'
                : 'info'
            "
          >
            {{
              scenarioDetail.severity === "critical"
                ? "严重"
                : scenarioDetail.severity === "high"
                ? "高危"
                : scenarioDetail.severity === "medium"
                ? "中危"
                : "低危"
            }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="scenarioDetail.is_active ? 'success' : 'info'">
            {{ scenarioDetail.is_active ? "启用" : "禁用" }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="描述" :span="2">
          {{ scenarioDetail.description || "暂无" }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 快速测试对话框 -->
    <el-dialog v-model="showQuickTestDialog" title="快速测试场景" width="700px">
      <el-form>
        <el-form-item label="场景名称">
          <el-input :value="editingScenario?.scenario_name" disabled />
        </el-form-item>
        <el-form-item label="目标URL" required>
          <el-input
            v-model="testForm.target_url"
            placeholder="请输入目标URL，例如：https://example.com/login"
          />
        </el-form-item>
        <el-form-item v-if="testResult">
          <el-alert
            :type="testResult.status === 'vulnerable' ? 'error' : 'success'"
            :title="
              testResult.status === 'vulnerable' ? '发现漏洞' : '未发现漏洞'
            "
            :description="
              testResult.message || JSON.stringify(testResult, null, 2)
            "
            :closable="false"
            show-icon
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showQuickTestDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitTest" :loading="testing">
          开始测试
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.search-form-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>
